<head>
    <link rel="stylesheet" href="/css/layui/css/layui.css">
    <script src="/css/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>
</head>

<div style="margin-bottom: 5px">
    <span class="layui-breadcrumb">
          <a href="">首页</a>
          <a><cite>首页轮播图管理</cite></a>
    </span>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增轮播图</button>

<div style="height: 800px" class="modal-body">
    <table class="layui-table">
        <thead>
        <tr>
            <th>编号</th>
            <th>轮播图</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <?php foreach($list as $v): ?>
        <tr>
            <td><?=$v['Platform']['id']?></td>
            <td>
                <a href="<?=$v['Platform']['image_url']?>" data-fancybox data-caption="轮播图">
                    <img style="width: 50px;height: 50px" src="<?=$v['Platform']['image_url']?>"/>
                </a>
            </td>
            <td><?=$v['Platform']['status']?></td>
            <td><?= date('Y-m-d H:i:s',$v['Platform']['create_time'])?></td>
            <td>
                <a class="layui-icon layui-icon-edit"
                   onclick="edit(<?=$v['Platform']['id']?>,'<?=$v['Platform']['image_url']?>',<?=$v['Platform']['status']?>)"
                   data-toggle="modal" data-target="#myModal"></a>
                <a class="layui-icon layui-icon-subtraction" onclick="del(<?=$v['Platform']['id']?>)"></a>
            </td>
        </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
    <div class="modal fade" id="myModal" data-backdrop="false" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" onclick="close1()" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">轮播图修改</h4>
                </div>
                <div class="modal-body">
                    <div class="layui-form">
                        <input id="id" hidden/>
                        <div class="layui-form-item">
                            <label class="layui-form-label">轮播图上传</label>
                            <div class="layui-input-block">
                                <div id="cupload"></div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">轮播图状态</label>
                            <div class="layui-input-block">
                                <input type="checkbox" checked="true" id="status" name="open" lay-skin="switch"
                                       lay-filter="switchTest"
                                       lay-text="显示|隐藏">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="close1()" data-dismiss="modal">返回</button>
                    <button type="button" id="ajax_submit" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
<script src="/js/cupload.js"></script>
<script>

    var cupload = new Cupload({
        ele: "#cupload",
        name: "img",              // 图片input的name名,非必需,默认为image
        num: 1,                    // 可上传图片的数量,非必需,默认为1
        url: "http://CI.com/api/upload",       // 异步上传url,非必需,无默认值
        deleteUrl: "http://CI.com/api/del_file",       // 异步删除url,删除时同时删除服务器图片,非必需,无默认值
        width: 478,                  // 预览框的宽,单位为px,非必需,默认为148
        height: 150,                  // 预览框的高,单位为px,非必需,默认为148
    });


    layui.use(['form'], function () {
        var form = layui.form;

        $('#ajax_submit').click(function () {
            var sta = 0;
            if ($('#status').is(':checked')) {
                var sta = 1;
            }
            var data = {
                'id': $('#id').val(),
                'image_url': $('input[name^=img]').val(),
                'status': sta,
            }
            console.log(data);
            $.ajax({
                'url': '/Platform/alertRotation',
                'data': data,
                'type': 'post',
                'dataType': 'json',
                'success': function (res) {
                    if (res.code == 400) {
                        layer.msg("操作失败!");
                    } else if (res.code == 200) {
                        layer.msg("操作成功!");
                    }
                    setTimeout(function () {
                        window.location.reload();
                    }, 800)
                }
            });
        })

    });

    function close1() {
        window.location.reload();
    }

    function edit(id, img, status) {
        $('#id').val(id);
        var sta = false;
        if (status == 1) {
            sta = true;
        }
        $('#status').prop("checked", sta);
        layui.form.render();
    }

    function del(id) {
        var data = {
            'id': id
        }
        $.ajax({
            'url': '/platform/delRotation',
            'type': 'post',
            'dataType': 'Json',
            'data': data,
            'success': function (res) {
                if (res.code == 200) {
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.msg('删除成功');
                    })
                } else {
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.msg('删除失败');
                    })
                }
                setTimeout(function () {
                    window.location.reload();
                }, 800);
            }
        });
    }

</script>